<template>
  <!-- 顶部NavBar -->
  <wd-toast />
  <wd-navbar title="问医生" left-arrow @click-left="handleClickLeft" />
  <!-- 搜索框 -->
  <wd-search hide-cancel placeholder-left placeholder="搜一搜：医生/疾病名称" />
  <!-- 下拉搜索 -->
  <view @click="closeOutside">
    <wd-drop-menu>
      <wd-drop-menu-item v-model="value1" :options="option1" @change="handleChange1" />
      <wd-drop-menu-item v-model="value2" :options="option2" @change="handleChange2" />
      <wd-drop-menu-item v-model="value3" :options="option3" @change="handleChange2" />
    </wd-drop-menu>
  </view>
  <!-- 搜索数据 -->
  <view class="contents">
    <view class="content_left">
      <img
        src="@/static/icons/weixin.png"
        alt="图片加载失败"
        style="width: 90rpx; height: 90rpx; border-radius: 50%"
      />
    </view>
    <view class="content_right">
      <view class="content_right_textOne">
        <text style="font-size: 36rpx; font-weight: 600">王医生</text>
        <text style="margin-left: 15rpx; font-size: 24rpx; color: #6f6f6f">
          内分泌科 | 主任医师
        </text>
      </view>
      <view class="content_right_textTwo" style="margin-top: 8rpx">
        <view class="ThreeFalse" style="font-size: 18rpx">三甲</view>
        <text style="margin-left: 6rpx; font-size: 24rpx; color: #3c3e42">积水潭医院</text>
      </view>
      <view class="content_right_textThree" style="width: 580rpx; height: 68rpx">
        <text style="font-size: 24rpx; color: #6f6f6f">
          擅长:糖尿病，高血压，痛风，糖尿病，高血压，痛风，糖尿病，高血压，痛风，糖尿病...
        </text>
      </view>
      <view class="content_right_textFour" style="display: flex; margin-top: 20rpx">
        <view class="mark">
          <img
            src="@/static/icons/服务评价_满星@1x.png"
            alt="icon显示错误"
            style="width: 23.35rpx; height: 22.26rpx"
          />
          <text style="margin-left: 12.32rpx; font-size: 24rpx; color: #fea116">4.9</text>
        </view>
        <view class="visitsNum" style="align-items: center; margin-left: 25rpx">
          <text style="font-size: 24rpx; color: #979797">接诊数</text>
          <text style="margin-left: 8rpx; font-size: 24rpx; color: #fea116">1.5万</text>
        </view>
      </view>
      <view
        class="content_right_textFive"
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 552rpx;
          height: 58rpx;
          margin-top: 30rpx;
        "
      >
        <text style="font-size: 36rpx; color: #16c2a3">￥10</text>
        <button
          style="
            width: 140rpx;
            height: 58rpx;
            font-size: 28rpx;
            line-height: 57rpx;
            color: #16c2a3;
            background-color: #eaf8f6;
            border: none;
            border-radius: 55px;
          "
        >
          问医生
        </button>
      </view>
    </view>
  </view>
  <view class="contents">
    <view class="content_left">
      <img
        src="@/static/icons/weixin.png"
        alt="图片加载失败"
        style="width: 90rpx; height: 90rpx; border-radius: 50%"
      />
    </view>
    <view class="content_right">
      <view class="content_right_textOne">
        <text style="font-size: 36rpx; font-weight: 600">王医生</text>
        <text style="margin-left: 15rpx; font-size: 24rpx; color: #6f6f6f">
          内分泌科 | 主任医师
        </text>
      </view>
      <view class="content_right_textTwo" style="margin-top: 8rpx">
        <view class="ThreeFalse" style="font-size: 18rpx">三甲</view>
        <text style="margin-left: 6rpx; font-size: 24rpx; color: #3c3e42">积水潭医院</text>
      </view>
      <view class="content_right_textThree" style="width: 580rpx; height: 68rpx">
        <text style="font-size: 24rpx; color: #6f6f6f">
          擅长:糖尿病，高血压，痛风，糖尿病，高血压，痛风，糖尿病，高血压，痛风，糖尿病...
        </text>
      </view>
      <view class="content_right_textFour" style="display: flex; margin-top: 20rpx">
        <view class="mark">
          <img
            src="@/static/icons/服务评价_满星@1x.png"
            alt="icon显示错误"
            style="width: 23.35rpx; height: 22.26rpx"
          />
          <text style="margin-left: 12.32rpx; font-size: 24rpx; color: #fea116">4.9</text>
        </view>
        <view class="visitsNum" style="align-items: center; margin-left: 25rpx">
          <text style="font-size: 24rpx; color: #979797">接诊数</text>
          <text style="margin-left: 8rpx; font-size: 24rpx; color: #fea116">1.5万</text>
        </view>
      </view>
      <view
        class="content_right_textFive"
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 552rpx;
          height: 58rpx;
          margin-top: 30rpx;
        "
      >
        <text style="font-size: 36rpx; color: #16c2a3">￥10</text>
        <button
          style="
            width: 140rpx;
            height: 58rpx;
            font-size: 28rpx;
            line-height: 57rpx;
            color: #16c2a3;
            background-color: #eaf8f6;
            border: none;
            border-radius: 55px;
          "
        >
          问医生
        </button>
      </view>
    </view>
  </view>
  <view class="contents">
    <view class="content_left">
      <img
        src="@/static/icons/weixin.png"
        alt="图片加载失败"
        style="width: 90rpx; height: 90rpx; border-radius: 50%"
      />
    </view>
    <view class="content_right">
      <view class="content_right_textOne">
        <text style="font-size: 36rpx; font-weight: 600">王医生</text>
        <text style="margin-left: 15rpx; font-size: 24rpx; color: #6f6f6f">
          内分泌科 | 主任医师
        </text>
      </view>
      <view class="content_right_textTwo" style="margin-top: 8rpx">
        <view class="ThreeFalse" style="font-size: 18rpx">三甲</view>
        <text style="margin-left: 6rpx; font-size: 24rpx; color: #3c3e42">积水潭医院</text>
      </view>
      <view class="content_right_textThree" style="width: 580rpx; height: 68rpx">
        <text style="font-size: 24rpx; color: #6f6f6f">
          擅长:糖尿病，高血压，痛风，糖尿病，高血压，痛风，糖尿病，高血压，痛风，糖尿病...
        </text>
      </view>
      <view class="content_right_textFour" style="display: flex; margin-top: 20rpx">
        <view class="mark">
          <img
            src="@/static/icons/服务评价_满星@1x.png"
            alt="icon显示错误"
            style="width: 23.35rpx; height: 22.26rpx"
          />
          <text style="margin-left: 12.32rpx; font-size: 24rpx; color: #fea116">4.9</text>
        </view>
        <view class="visitsNum" style="align-items: center; margin-left: 25rpx">
          <text style="font-size: 24rpx; color: #979797">接诊数</text>
          <text style="margin-left: 8rpx; font-size: 24rpx; color: #fea116">1.5万</text>
        </view>
      </view>
      <view
        class="content_right_textFive"
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 552rpx;
          height: 58rpx;
          margin-top: 30rpx;
        "
      >
        <text style="font-size: 36rpx; color: #16c2a3">￥10</text>
        <button
          style="
            width: 140rpx;
            height: 58rpx;
            font-size: 28rpx;
            line-height: 57rpx;
            color: #16c2a3;
            background-color: #eaf8f6;
            border: none;
            border-radius: 55px;
          "
        >
          问医生
        </button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useQueue, useToast } from "wot-design-uni";
const { show: showToast } = useToast();
const { closeOutside } = useQueue();
const value1 = ref<number>(0);
const value2 = ref<number>(0);
const value3 = ref<number>(0);
const option1 = ref<Record<string, any>[]>([
  { label: "北京", value: 0 },
  { label: "上海", value: 1 },
  { label: "广州", value: 2 },
]);
const option2 = ref<Record<string, any>[]>([
  { label: "综合排序", value: 0 },
  { label: "好评排序", value: 1 },
]);
const option3 = ref<Record<string, any>[]>([
  { label: "筛选", value: 0 },
  { label: "精选服务", value: 1 },
  { label: "上架时间", value: 2 },
]);
function handleChange1({ value }: any) {
  console.log(value);
}
function handleChange2({ value }: any) {
  console.log(value);
}
function handleClickLeft() {
  showToast("按钮1");
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: space-between;
  width: 750rpx;
  height: 393rpx;
}
.ThreeFalse {
  display: block;
  align-items: center;
  width: 52rpx;
  height: 28rpx;
  line-height: 25rpx;
  color: white;
  text-align: center;
  background-color: #677fff;
  border-radius: 4rpx;
}
.content_right_textTwo {
  display: flex;
}
.contents {
  display: flex;
  width: 23.4375rem;
  height: 12.28125rem;
}
.content_left {
  margin-top: 41rpx;
  margin-left: 30rpx;
}
.content_right {
  margin-top: 41rpx;
  margin-left: 28rpx;
}
</style>
